<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/6/7
  Time: 7:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/wechat/ucenter/perCenter.css">
    <jsp:include page="../public/head.jsp" flush="true" />
    <style>
        .info{
            top: 1rem;
        }
        .my_tab{
            position: absolute;
            bottom:0;
            width: 100%;
            height: 3.5rem;
            line-height: 1.2rem;
            background: rgba(30,30,30,0.5);
            padding-top: 0.5rem;
        }
        .my_ul{
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }
        .my_tabitem{
            float: left;
            width: 50%;
            text-align: center;
        }
        .my_number{
            margin-bottom: 0;
            color: white;
        }
        .my_text{
            margin-bottom: 0;
            color: #ccc;
        }
    </style>
</head>
<body>
<header style="display:none;">
    <div class="h-cont">
        <div class="h-l"></div>
        <div class="h-r"><span>个人中心</span></div>
    </div>
</header>
<div  style="display:none;" class="h-ocupie"></div>


<div class="home-nav-down">
    <table width="100%">
        <tbody><tr>
            <td class="last"><a href="/home/beforelogin/index.do?cityId=${rechargeCityId}" ><i class="iconfont icon-shouye">&#xe612;</i>首页</a></td>
            <td><a href="/order/orderList.do" class="item bg2"><i class="iconfont icon-gouwuche">&#xe611;</i>订单</a></td>
            <td><a class="current" ><i class="iconfont icon-me ">&#xe617;</i>我的</a></td>
        </tr>
        </tbody></table>
</div>
<section>
    <div class="my_percenter">

        <div class="pos_place">
            <div class="info">
                <div class="txt1">
                    <c:choose>
                        <c:when test="${!fn:contains(userinfo.photo,'user')}">
                            <i class="iconfont icon-me" onclick="uploadIcon()">&#xe610;</i><input id="uploadInput" accept="image/png,image/gif,image/jpg" type="file" style="display:none;opacity:0;">
                        </c:when>
                        <c:otherwise>
                            <a><img src="${userinfo.photo}" class="img-circle" id="photo" style="margin-top: 20px" width="50" height="50" onclick="uploadIcon()"/><input id="uploadInput" accept="image/png,image/gif,image/jpg" type="file" style="display:none;opacity:0;"></a>
                        </c:otherwise>
                    </c:choose>

                </div>
                <div class="txt2"><a href="/ucenter/userinfo.do"><span>${userinfo.nickname}</span><i class="iconfont icon-me" style="margin-left: 10px;">&#xe606;</i></a></div>
                <%--<div class="txt3"><span class="s1">余额：</span><span class="s2">${userinfo.money}元</span></div>--%>


            </div>
            <div class="my_tab">
                <ul class="my_ul">
                    <%--点击去余额页面--%>
                    <li class="my_tabitem" onclick="gotoAccount()" >
                        <p class="my_number">￥${userinfo.money}</p>
                        <p class="my_text">余额</p>
                    </li>
                    <li class="my_tabitem" onclick="gotoCoupon()">
                        <%--点击去优惠券页面--%>
                        <p class="my_number coupon-size">优惠券个数</p>
                        <p class="my_text">优惠券</p>
                    </li>
                </ul>
            </div>

        </div>
        <div class="icoGroup">
            <a href="/order/orderList.do" class="b_r b_b"><i class="iconfont icon1">&#xe611;</i><span>我的订单</span></a>
            <a href="/home/shopCar.do" class="b_r b_b"><i class="iconfont icon2">&#xe61f;</i><span>我的购物车</span></a>
            <a href="/ucenter/myAddress.do" class="b_b"><i class="iconfont icon3">&#xe609;</i><span>我的地址</span></a>
            <a href="/ucenter/recharge.do" class="b_r "><i class="iconfont icon4">&#xe621;</i><span>我的余额</span></a>
            <a href="tel:4006059144" class="b_r "><i class="iconfont icon5">&#xe615;</i><span>客服热线</span></a>
            <a href="/ucenter/feedback.do" class=" "><i class="iconfont icon6">&#xe61b;</i><span>反馈意见</span></a>
        </div>
        <form>
            <input type="button" name="" value="安全退出" class="quit_btn" onclick="quit()">
        </form>
    </div>
</section>

<footer>
    <div  class="my_ocupie"></div>
</footer>
<script>


    function uploadIcon() {
        $("#uploadInput").click();
    }

    $("#uploadInput").on("change",function () {
        var fd = new FormData();
        fd.append("id", ${userinfo.id});
        fd.append("photo", $("#uploadInput").get(0).files[0]);
        tip("","正在上传图片",false);
        $.ajax({
            url: "/mobile/user?action=photo",
            type: "POST",
            processData: false,
            contentType: false,
            data: fd,
            dataType:'json',
            success: function(data) {
                $("#tip1").remove();
                if (!data.success){
                    tip("",data.msg,true);
                }else {
                    window.location.reload();
                }
            }
        });
    });

    function quit() {
        if (confirm("是否退出")){
            localStorage.removeItem("zfMobile");
            localStorage.removeItem("zfPassWord");
            window.location.href = "/logout.do";
        }
    }

    function gotoAccount() {
        location.href="http://www.52letsgo.cn/fe/user/apphtml/account.html?userId=${userinfo.id}";
    }

    function gotoCoupon(){

        location.href="http://www.52letsgo.cn/fe/user/apphtml/user_coupon/?userId=${userinfo.id}";
    }

    getCouponSize();

    function getCouponSize(){
        var url = "/m/Coupon/getUseCoupon?userId=${userinfo.id}"
        $.get(url,function(result){
            var number = 0 ;

            if(result.data ==null || result.data =='undefined' ||result.data == ''){
                $(".coupon-size").text(0);
            }else{
                var data = result.data;
                for(var i in data){
                    if(data[i].isTimeout==0){
                        number++;
                    }
                }
                $(".coupon-size").text(number);
            }

        })
    }
</script>
</body>
</html>
